<template>
  <div class="requestCardDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">办卡请求审批详情</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">状态：<b :class="[stateTextClass]" v-text="stateText"></b></span>
      </div>
    </card>
    <group label-width="6em">
      <cell title="请求类型" v-if="requestCardInfo.TYPE == 1" :value="'充值'"></cell>
      <cell title="请求类型" v-if="requestCardInfo.TYPE == 0" :value="'办卡'"></cell>
      <cell title="请求类型" v-if="requestCardInfo.TYPE == 2" :value="'旧数据导入'"></cell>
      <cell title="充值金额" :value="'¥ ' + formatCurrency(requestCardInfo.RECHARGE_PRICE) + '元'"></cell>
      <cell title="发起办卡人" v-if="requestCardInfo.TYPE != 2" :value="requestCardInfo.OPERATOR + ' - ' + requestCardInfo.operator_DEPARTMENT"></cell>
      <cell title="发起办卡时间" :value="requestCardInfo.REQUEST_DATETIME"></cell>
      <cell title="会员卡种类" :value="requestCardInfo.CARDNAME"></cell>
      <cell title="审批人" v-if="requestCardInfo.APPROVAL_STATE == 0" :value="'未审批'"></cell>
      <cell title="审批人" v-else :value="(requestCardInfo.AUDITOR && requestCardInfo.auditor_DEPARTMENT)?requestCardInfo.AUDITOR + ' - ' + requestCardInfo.auditor_DEPARTMENT:'无法获取审批人'"></cell>
    </group>
    <group title="赠送关联订单详情：" label-width="7em">
      <cell v-if="requestCardInfo.TYPE == 2" title="旧数据导入" :value="'没有关联订单'"></cell>
      <span v-else>
        <cell title="订单单号" inline-desc="点击查看订单详情" class="number" :value="requestCardInfo.ORDER_NUMBER" :is-link="showLink" :link="orderLink"></cell>
        <cell title="办卡房台号" :value="requestCardInfo.AREA + ' - ' + requestCardInfo.NUMBER + '（' + requestCardInfo.ROOM_PLATFORM_TYPE + '）'"></cell>
        <cell title="客户名称" :value="requestCardInfo.CUSTOMER_NAME"></cell>
      </span>
    </group>
    <box gap="1rem 0.8rem">
      <div class="btnArea">
        <x-button v-if="requestCardInfo.APPROVAL_STATE == 1 || requestCardInfo.APPROVAL_STATE == 2" :disabled="false" text="已审批"></x-button>
        <div class="btnAreaWrap" v-if="requestCardInfo.APPROVAL_STATE == 0">
          <x-button @click.native="submit(true)" type="primary" :show-loading="loadingStatus" :disabled="loadingStatus" text="审批同意" class="inlineBtn"></x-button>
        </div>
        <div class="btnAreaWrap" v-if="requestCardInfo.APPROVAL_STATE == 0">
          <x-button @click.native="submit(false)" type="warn" :show-loading="loadingStatus" :disabled="loadingStatus" text="审批不同意" class="inlineBtn"></x-button>
        </div>
      </div>
    </box>
    <br/>
  </div>
</template>

<script>
  import {Group, Cell, Card, Box, XButton, numberComma } from 'vux'
  import {getCardDetail, submitAuditCard} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'requestCardDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramCardId:this.$route.params.cardId,
        paramEntityCardNumber:this.$route.params.entityCardNumber,
        requestCardInfo:{},
        stateText:'',
        stateClass:'',
        stateTextClass:'',
        showLink:false,
        orderLink:''
      }
    },
    components:{
      Group,
      Cell,
      Card,
      Box,
      XButton
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthorityNotice
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      getState(state){
        switch (state) {
          case 0:this.stateText = '待审批';this.stateClass = 'icon-dengluchaoshi';this.stateTextClass = 'waiting';break
          case 1:this.stateText = '审批同意';this.stateClass = 'icon-chenggong1';this.stateTextClass = 'agree';break
          case 2:this.stateText = '审批不同意';this.stateClass = 'icon-shibai  ';this.stateTextClass = 'disagree';break
          default:this.stateText = '无状态';this.stateClass = '';this.stateTextClass = '';break
        }
      },
      submit(agreeOrNot){
        this.loadingStatus = true
        let agreeText = agreeOrNot?'同意':'不同意'
        this.$vux.confirm.show({
          title:'是否确认操作',
          content:'【' + agreeText + '】审批操作？',
          onCancel: ()=> {
            this.loadingStatus = false
          },
          onConfirm: ()=> {
            let reqParams = {
              cardId:this.paramCardId,
              entityCardNumber:this.paramEntityCardNumber,
              agreeOrNot:agreeOrNot
            }
            submitAuditCard(reqParams).then((res)=>{
              if(res.status == 'success'){
                message({message:'您已同意审批',type:'info'})
                this.$router.push({path:'/requestCardList'})
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('submitAuditCard error info:', res.msg)
              }
              this.loadingStatus = false
            }).catch((err)=>{console.log('submitAuditCard catch info:',err)})
          }
        })
      }
    },
    mounted(){
      if(this.authority.card == 'card_audit'){
        console.log("paramEntityCardNumber:",this.paramEntityCardNumber)
        let reqParams={
          rechargeId:this.paramCardId,
          entityCardNumber:this.paramEntityCardNumber
        }
        getCardDetail(reqParams).then((res)=>{
          if(res.status == 'success'){
            this.requestCardInfo = res.data
            this.getState(res.data.APPROVAL_STATE)
            this.showLink = true
            this.orderLink = {name:'订单详情',params:{orderId:this.requestCardInfo.ORDER_ID}}
            this.loadingStatus = false
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getCardDetail error info:', res.msg)
          }
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }).catch((err)=>{console.log('getCardDetail catch info:',err)})
      }else{
        message({message:'没有权限查看该页面',type:'error'})
        this.$router.push({path:'/noticeIndex'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .requestCardDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.waiting{color: #ffca10;}
        &.agree{color: #0abd39;}
        &.disagree{color: #ff2623;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.waiting{color: #ffca10;}
          &.agree{color: #0abd39;}
          &.disagree{color: #ff2623;}
        }
      }
    }
    .btnArea{
      display:flex;margin: 1rem 0;text-align: center;
      .btnAreaWrap{width:50%;}
      button{width:90%;margin: 0 5%;height: 2.6rem;font-size: 1.2rem;}
    }
  }
</style>
